import React, { lazy, Component } from "react";
import { withRouter } from "../../router/hooks";
import store from "../../store/index";
import "./user.less";
import { withTranslation } from "react-i18next";

const Header = lazy(() =>
  import(/* webpackChunkName:'header' */ "../components/header/index")
);
const Tabbar = lazy(() =>
  import(/* webpackChunkName:'tabbar' */ "../components/tabbar/index")
);
const Button = lazy(() =>
  import(/* webpackChunkName:'button' */ "../../components/button/index")
);
class User extends Component {
  render() {
    const { t } = this.props;
    return (
      <div className="user">
        <Header routeName={t("User")} />
        <div className="content">
          User Page
          <Button
            slot={<span onClick={this.quitClickHandle}>{t("Quit")}</span>}
          />
        </div>
        <Tabbar routeName="User" />
      </div>
    );
  }
  quitClickHandle(e) {
    e.preventDefault();
    store.dispatch({ type: "DELETETOKEN" });
    window.location.href = "/";
  }
}

export default withRouter(withTranslation()(User));
